<template>
  <div v-loading="loading" class="app-container">
    <div class="filter-container">
      <el-select v-model="userRole" size="medium" placeholder="选择用户组" class="role-search" clearable @change="getList">
        <el-option
          v-for="item in roleList"
          :key="item.role_id"
          :label="item.role_name"
          :value="item.role_id"
        />
      </el-select>
      <el-select v-model="userSelDepa" size="medium" placeholder="选择系部" class="name-search" clearable @change="getList">
        <el-option
          v-for="item in config.departmentOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input v-model="userSelAccount" placeholder="请输入内容" class="name-search" size="medium">
        <el-select slot="prepend" v-model="userSelType" placeholder="请选择">
          <el-option key="1" :value="1" label="学号"/>
          <el-option key="2" :value="2" label="姓名"/>
          <el-option key="3" :value="3" label="班级"/>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="getList"/>
      </el-input>
      <el-button
        v-if="$store.getters.menuList.user_create"
        class="filter-item"
        type="primary"
        size="medium"
        icon="el-icon-plus"
        @click="visibleCreateDialog = true">
        创建用户
      </el-button>
      <el-button
        v-if="$store.getters.menuList.user_import_excel"
        class="filter-item"
        type="primary"
        size="medium"
        icon="el-icon-plus"
        @click="handleImportExcel">
        批量导入学生信息
      </el-button>
    </div>
    <el-table :data="studentList" size="medium" border stripe highlight-current-row>
      <el-table-column prop="user_id" label="学号" align="center"/>
      <el-table-column prop="user_name" label="姓名" align="center"/>
      <el-table-column label="性别" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.sex | formatSex }}</span>
        </template>
      </el-table-column>
      <el-table-column label="系部" align="center">
        <template slot-scope="scope">
          <span v-if="!scope.row.depa || scope.row.depa === '0'">-</span>
          <span v-else>{{ scope.row.depa | formatDepa }}</span>
        </template>
      </el-table-column>
      <el-table-column label="年级" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.grade === '0'">-</span>
          <span v-else>{{ scope.row.grade }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="bmmc" label="班级/部门" align="center"/>
      <el-table-column prop="zxzt" label="在校状态" align="center"/>
      <el-table-column label="用户组" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.role_id | formatUserGroup }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180px">
        <template slot-scope="scope">
          <el-button
            v-if="$store.getters.menuList.user_edit_info"
            type="primary"
            @click="handleEditDialog(scope.row)">
            编辑
          </el-button>
          <el-button
            v-if="$store.getters.menuList.user_delete_info"
            type="danger"
            @click="handleDeleteUser(scope.$index, scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <upload-file :visible="uploadDialogVisible" @import-success="getList" @close="uploadDialogVisible = false"/>
    <create-user-dialog :visible="visibleCreateDialog" @close="visibleCreateDialog=false" @submit="handleInit"/>
    <editUserDialog :visible="visibleEditDialog" :user-info="clickUser" @submit="handleInit" @close="visibleEditDialog = false"/>

    <pagination :total="pageTotal" :page.sync="page" :limit="10" layout="prev, pager, next, jumper" class="hidden-xs-only" @pagination="getList"/>
    <pagination :total="pageTotal" :page.sync="page" :limit="10" small layout="prev, pager, next" class="hidden-sm-and-up" @pagination="getList"/>
  </div>
</template>

<script>
import config from '@/utils/config.js'
import Pagination from '@/components/Pagination'
import { getUserList, deleteUser } from '@/api/user'
import uploadFile from './uploadFile'
import createUserDialog from './createUserDialog'
import editUserDialog from './editUserDialog'
import Vue from 'vue'
import { getRoleList } from '@/api/user'

export default {
  components: { Pagination, uploadFile, createUserDialog, editUserDialog },
  data() {
    return {
      loading: false,
      page: 1,
      userInfo: null,
      config,
      userSelDepa: null,
      pageTotal: 0,
      activityYear: null,
      activityTerm: null,
      activityType: null,
      userRole: null,
      userSelAccount: '',
      userSelType: 1,
      uploadDialogVisible: false,
      props: {
        value: 'label',
        children: 'cities'
      },
      studentList: [],
      roleList: [],
      clickUser: {},
      visibleCreateDialog: false,
      visibleEditDialog: false
    }
  },
  created() {
    this.userInfo = this.$store.getters.userInfo
    this.getList()
    this.handleRoleList()
  },
  methods: {
    getList(data) {
      this.loading = true
      getUserList(this.formateListParams(data))
        .then(res => {
          this.studentList = res.data
          this.pageTotal = res.total || 0
        })
        .catch(() => {})
        .finally(() => {
          this.loading = false
        })
    },
    handleImportExcel() {
      this.uploadDialogVisible = true
    },
    formateListParams(data) {
      const result = {}
      const _page = data && data.page || this.page

      result.page = _page.toString()
      result.size = '10'

      // 添加学号、姓名条件
      if (this.userSelAccount.length) {
        if (this.userSelType === 1) {
          result.user_id = this.userSelAccount
        } else if (this.userSelType === 2) {
          result.user_name = this.userSelAccount
        } else if (this.userSelType === 3) {
          result.bmmc = this.userSelAccount
        }
      }
      if (this.userSelDepa) {
        result.depa = this.userSelDepa.toString()
      }

      if (this.userRole) {
        result.role_id = this.userRole.toString()
      }

      return result
    },
    handleInit() {
      this.visibleCreateDialog = false
      this.visibleEditDialog = false
      setTimeout(() => {
        this.getList()
      }, 500)
    },
    handleEditDialog(userInfo) {
      const info = Object.assign({}, userInfo)
      info.depa = Vue.filter('formatDepa')(info.depa)
      info.sex = Vue.filter('formatSex')(info.sex)
      delete info.user_pwd

      this.clickUser = info
      this.visibleEditDialog = true
    },
    handleDeleteUser(index, id) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteUser(id.toString()).then(res => {
          let type = 'error'
          if (res.code === 200) {
            type = 'success'
            this.studentList.splice(index, 1)
          }
          this.$message({
            type,
            message: res.msg
          })
        }).catch(() => {})
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleRoleList() {
      getRoleList().then(res => {
        this.roleList = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.descCount {
  font-size: 14px;
  color: #5e6d82;
  margin: 0;
  span {
    color: red;
  }
}
.name-search {
  width: 280px;
  margin-bottom: 10px;
  vertical-align: middle;
  .el-select {
    width: 80px;
  }
}

.role-search {
  margin-bottom: 10px;
  vertical-align: middle;
}
@media screen and (max-width: 370px) {
  .pagination-container.hidden-sm-and-up {
    padding: 0;
  }
}
</style>
